<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Add Lecture</title>

            <link type="text/css" rel="stylesheet" href="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.css" />
            <!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>-->
            <script type="text/javascript" src="https://www.gstatic.com/freebase/suggest/4_2/suggest.min.js"></script>

            <script type="text/javascript">

                $(function() {
                    $("#courseid")
                            .suggest({
                        key: "AIzaSyA0Fjcd-S9IZV8WKl6o4JQsyTseu1M43NA",
                        show_id: true
                    })
                            .bind("fb-select", function(e, data) {
                        if (data.notable) {
                            document.getElementById('courseid').value = data.name + " " + '(' + data.notable.name + ')';
                        } else {
                            document.getElementById('courseid').value = data.name;
                        }
                    });
                });

            </script>
        </h:head>

        <h:body>

            <p:layout fullPage="true">
                <p:layoutUnit position="north" header="EducationX">
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses" />     
                            <p:separator />  
                            <h:link value="User Page" outcome="userPage"/>
                            <p:separator />  
                            <h:link value="Tags" outcome="tags"/>
                        </p:toolbarGroup>
                        <p:toolbarGroup align="right">
                            <p:inputText id="courseid" style="width:300px; height:20px; font-size:12px" />
                            <p:button value="Search" style="top:3px; height:20px; font-size: 12px">
                            </p:button>
                        </p:toolbarGroup>
                    </p:toolbar>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    <h1>New Lecture</h1>
                    <h:form>
                        <h:panelGrid columns="2">
                                <h:outputText value="Name:"/>
                                <h:inputText id="name" value="#{lecture.lecture.lectureName}" title="Name" required="true" requiredMessage="The Name field is required." />
                            
                                <h:outputText value="Link:"/>
                                <h:inputText id="link" value="#{lecture.lecture.link}" title="Link" required="true" requiredMessage="The Link field is required." />

                                <h:outputText value="Order:"/>
                                <h:inputText id="order" value="#{lecture.lecture.order}" title="Order" required="true" requiredMessage="The Order field is required." />
                                
                            </h:panelGrid>                           
                        <br />                          
                        <h:commandButton action="#{lecture.create}" value="Add a new Lecture">
                            <f:setPropertyActionListener target="#{lecture.action}" value="#{courses.course}" />
                        </h:commandButton>
                        <br />                                   
                    </h:form>
                </p:layoutUnit>
            </p:layout>
        </h:body>
     </f:view>
</html>
